<template>
	<view class="inviteFriends">
        <SRV-topbar title="我的推荐" :isLeft="true"></SRV-topbar>
        <view class="searchInfo">
        	<view style="width: 20%;">关键词</view>
        	<view class="searchInput"><input type="text" placeholder-style="font-weight: 400;color:rgba(60,72,104,0.8)" value="" placeholder="请输入联系人姓名/电话" v-model="pageParam.userkey"/></view>
            <view class="btn" @click="searchFun()">搜索</view>
        </view>
		<view v-for="(item,index) in pageResult.list" :key="index" class="line" @click="jump('inner_detail', item.id)">
			<view class="left">
				<image :src="item.picture" mode="aspectFill"></image>
				<view class="txt">
                    <view class="txt_top" style="font-size: 24px;">{{item.title}}</view>
					<view class="txt_top">
						<text class="oneline">{{item.name}}</text>
						<text class="oneline">{{item.mobile}}</text>
					</view>
                    <view class="txt_top">店铺折算：{{item.merchant_ratio}}（{{item.base_ratio}} + {{item.add_ratio}}）</view>
                </view>
                <view class="status-box">
                	<show-status :name="item.stateName" size="140" fontSize="38" boder="5"
                		:color="item.state==2 ? '#cc0000' : (item.state==1 ? '#fbca3f' : (item.state==9 ? '#009900' : '#FF0000')) ">
                	</show-status>
                </view>
			</view>
		</view>
		
		<view v-if="pageResult.list.length == 0" class="nocontent">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" ></image>
		</view>
        <view :style="'height:' + bottomHeight + 'rpx;'" class="bottom" v-if="businessInfo.state" @click="showCode()">{{businessInfo.title}}</view>
        
        <uni-popup ref="generateCode">
            <view class="show pickupCode-box">
                <view class="title">设置店铺邀请码</view>
                <view class="lineTitle">折扣：</view>
                <view class="levelList">
                    <view class="levelItem" v-for="(item, index) in gearList" :key="index" @click="selCodeParam('gear', index)">
                        <view :class="nowGear == index ?'sel':'nosel'"></view>
                        <text>{{item.name}}</text>
                    </view>
                </view>
                <view class="lineTitle">加点：</view>
                <view class="levelList">
                    <view class="levelItem" v-for="(item, index) in littleList" :key="index" @click="selCodeParam('little', index)">
                        <view :class="nowLittle == index ?'sel':'nosel'"></view>
                        <text>{{item.name}}</text>
                    </view>
                </view>
                <view class="btn" @click="generateCode()">
                    <view>确认</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="pickupCode">
            <view class="show pickupCode-box">
                <view class="title">{{businessInfo.title}}</view>
                <image class="img" :src="businessInfo.imgUrl"></image>
                <view class="pickupCode-t">{{businessInfo.code}}</view>
                <view class="btn" @click="close()">
                    <text>确认</text>
                </view>
            </view>
        </uni-popup>
	</view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
    import uniQrcode from '../../static/wxqrcode.js';
	export default {
		data() {
			return {
                nowGear: 0,
                gearList: [],
                nowLittle: 0,
                littleList: [],
				bottomHeight: 110,
                businessInfo: {
                    state: false,
                },
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
                    userkey : '',
                    type: 'business',
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
			}
		},
		methods: {
            getGearList() {
                serve.request({
                    url: '/merchant/apply/gear-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v3',
                }).then(res => {
                    _self.gearList = res.data.gearList;
                    _self.littleList = res.data.littleList;
                    _self.businessInfo = res.data.businessInfo;
                });
            },
			getList(){
				_self.pageParam.page++
				serve.request({
					url: '/member/merchant/list',
					data: _self.pageParam,
                    v: '/v3'
				}).then(res => {
					if (res.data && res.data.length > 0) {
						_self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
				});
			},
            showCode() {
                _self.$refs.generateCode.open();
            },
            selCodeParam(type, k) {
                if(type == 'gear') {
                    _self.nowGear = k;
                } else {
                    _self.nowLittle = k;
                }
            },
            generateCode() {
                var gearRatio = _self.gearList[_self.nowGear].ratio;
                var littleRatio = _self.littleList[_self.nowLittle].ratio;
                var codeUrl = _self.businessInfo.codeUrl+"_"+gearRatio+littleRatio;
                _self.businessInfo.imgUrl = uniQrcode.createQrCodeImg(codeUrl, {
                    size: parseInt(100) 
                });
                _self.$refs.generateCode.close();
                _self.$refs.pickupCode.open();
            },
            close() {
                _self.$refs.pickupCode.close();
                _self.$refs.popup.close();
            },
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(option) {
            _self = this;
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 150;
			}
            _self.getGearList();
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onPullDownRefresh() {
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onReachBottom() {
			if(_self.pageResult.isEnd || _self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.inviteFriends {
        .searchInfo {
            padding: 10rpx 2%;
            display: flex;
            align-items: center;
			border-bottom: 8rpx rgba(57, 72, 107, 0.1) solid;
            .searchInput {
                border: 1px solid #ccc;
                width: 60%;
                padding: 5rpx 0 5rpx 20rpx;
                border-radius: 20rpx;
            }
            .btn {
                width: 20%;
                text-align: center;
                border: 1rpx solid #ffd900;
                background-color: #ffd900;
                margin-left: 20rpx;
                border-radius: 20rpx;
            }
        }
		.tabbar {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			box-sizing: border-box;
            padding-bottom: 30rpx;
			border-bottom: 1rpx #EBEBEB solid;
			view {
				margin-top: 30rpx;
				margin-left: 40rpx;
				border-radius:40rpx;
				color: #999999;
				font-size: 28rpx;
				padding: 16rpx 30rpx;
				background-color:#F5F5F5;
			}

			.check {
				background: #FFF9E8;
				color: #FFBC00;
			}
		}

		.line {
			padding: 30rpx;
			border-bottom: 8rpx rgba(57, 72, 107, 0.1) solid;

			.left {
				display: flex;
				align-items: center;    
                justify-content: space-around;
                margin-bottom: 20rpx;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.txt {
					margin-left: 30rpx;
					display: flex;
					justify-content: center;
					flex-direction: column;
					.txt_top{
						display: flex;
						align-items: center;
						image{
							border-radius: 0;
							width:90rpx;
							height:32rpx;
							margin-right: 7rpx;
						}
                        .icon {
                            width: 60rpx;
                            height: 60rpx;
                        }
					}
					.txt_text2{
						margin-top: 30rpx;
					}
					text:first-child{
						color: #333333;
						font-size: 32rpx;
						margin-right: 19rpx;
					}

					text:last-child {
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
		}
		
		.nocontent{
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220rpx;
				height:220rpx;
			}
			text{
				font-size:28rpx;
				color:rgba(204,204,204,1);
			     margin-top: 30rpx;
			}
		}
        
        .rewardInfo {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            align-items: center;
            border-top: 1rpx solid #f7f1f1;
            padding: 20rpx 0;
            view{
                width: 33%;text-align: center;
            }
        }
        
        .bottom {
        	width: 100%;
        	height: 100rpx;
        	line-height: 100rpx;
        	text-align: center;
        	font-size: 32rpx;
        	color: rgba(255, 255, 255, 1);
        	background: rgba(251, 202, 63, 1);
        	bottom: 0rpx;
        	position: fixed;
        }
        .pickupCode-box {
            width: 80vw;
            background: #fff;
            border-radius: 8rpx;
        
            .title {
                width: 100%;
                text-align: center;
                color: #333333;
                height: 100rpx;
                line-height: 100rpx;
                font-size: 36rpx;
            }
        
            .img {
                width: 480rpx;
                height: 48rrpx;
                position: relative;
                left: 50%;
                margin-left: -240rpx
            }
        
            .pickupCode-t {
                width: 100%;
                text-align: center;
                height: 60rpx;
                line-height: 60rpx;
                letter-spacing: 8rpx;
                font-size: 40rpx;
            }
        
            .btn {
                width: 100%;
                height: 100rpx;
                text-align: center;
                line-height: 100rpx;
                font-size: 32rpx;
                color: #333333;
            }
            .lineTitle {
                    border-top: 1px solid #eeeeee;
                    padding-top: 15rpx;
                    padding-left: 20rpx;
            }
            .levelList {
                display: flex;
                margin-bottom: 20rpx;
                .levelItem {
                    display: flex;
                    width: 30%;
                    padding: 10rpx;
                }
            }
        }
        .nosel {
        	width: 36upx;
        	height: 36upx;
        	border: 1upx solid rgba(60, 72, 104, 1);
        	border-radius: 50%;    
            margin-right: 20rpx;
        }
        .sel {
        	background-image: url(../../static/img/check.png);
        	background-repeat: no-repeat;
        	width: 40upx;
        	height: 40upx;
        	background-size: 100%;    
            margin-right: 20rpx;
        }
        .nocheck {
        	width: 36upx;
        	height: 36upx;
        	border: 1upx solid rgba(60, 72, 104, 1);
        	border-radius: 20%;
        }
        .check {
        	background: url(../../static/img/checkbox_check.png);
        	background-repeat: no-repeat;
        	width: 40upx;
        	height: 40upx;
        	background-size: 100%;
        }
	}
</style>
